window.addEventListener("load", function () {
	const apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// console.log(apiTypeData);
	//功能一:动态渲染API分类区
	//动态渲染三大步
	//1.获取后台数据进行遍历
	let html = "";
	apiTypeData.forEach(function (v, i) {
		//2.遍历时拼接HTML结构
		//将激活样式和加粗样式加上
		if (i === 0) {
			html += `<li class="active" title=${v.keyword}>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class="fw-blod" title=${v.keyword}>${v.name}</li>`;
		} else {
			html += `<li title=${v.keyword}>${v.name}</li>`;
		}
	});
	//3.将拼接的HTML结构放入对应位置
	$("#apiCateList").innerHTML = html;

	//功能二:API分类区点击后增加激活样式
	// 1.获取相关节点
	// $("#apiCateList li")
	//2.给li绑定点击事件
	$("#apiCateList li").forEach(function (v) {
		v.addEventListener("click", function () {
			//3.先排他,清除其他激活的li
			$("#apiCateList li").forEach(function (item) {
				item.classList.remove("active");
			});
			this.classList.add("active");
			$("#searchInput strong").textContent = this.textContent;
			console.log($("searchInput strong"));

			$("#searchInput input").value = this.title;
		});
	});
	//功能三:点击API分类区的标签,联动下方的搜索框
	//1.将this的textContent 赋值给strong

	//2.将this的title赋值给搜索框的value

	let listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	//   功能四:卡片区域动态渲染
	// 1.获取后台相关数据
	
	let cardsHtml = "";
	listDataArr.forEach(function (v) {
		cardsHtml += `
		<li class="rel">
						<img src="../imgs/${v.img}" alt="图片已损坏" />
						<p>${v.name}</p>
						<p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
						${v.isSpecial ? '<span class="abs">企业认证</span>' : ""}
						<a class="abs" href="#">申请数据</a>
		</li>
		`;
	});
	//3.将HTML结构放入指定
	$("#apiCardsList").innerHTML = cardsHtml;

	// 功能五:点击分页器页码时,激活样式
	//1.获取相关节点
	//2.给页码绑定点击事件
	$("#pagination ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			//3.排他思想---点击后先移除所有的激活样式
			$("#pagination ul li").forEach(function (item) {
				item.classList.remove("active");
				//console.log(this);  注意:forEach中this指向的是window	
			});
			//4.再添加激活样式
			this.classList.add("active");
			console.log(Number(v.textContent));
			render(Number(v.textContent),5,listDataArr);	
		});
	});
	/*
	//功能六:点击分页器实现卡片区分页
	console.log("第一页",listDataArr.slice(0,5));
	console.log("第二页",listDataArr.slice(5,10));
	console.log("第三页",listDataArr.slice(10,15));
	console.log("第四页",listDataArr.slice(15,20));
	//复用函数,渲染函数
	// 1.实现基本功能
	// 2.确定函数函数名  render
	// 3.确定函数参数--当前页码pagination 每页条数pageSize  arr
	// 当前页码，每页条数，原数据
	// 公式：(当前页码 - 1) * 每页条数
	// （1 - 1） * 5
	// （2 - 1） * 5
	// 4.确定函数返回值--不需要
	// 5.将功能代码放入函数壳子，替换对应变量
	function render(pagination,pageSize,arr){
		//对数组进行处理
		//求开始索引(当前页-1)*每页条数
		let startIndex = (pagination - 1) * pageSize;
		const result = arr.slice(startIndex, startIndex + pageSize);
		// 1.获取后台数据，进行遍历
		let cardsHtml = "";
		result.forEach(function (v) {
			// 2.遍历时拼接为HTML结构
			cardsHtml += `
			<li class="rel">
				<img src='../imgs/${v.img}' alt="图片已损坏" />
				<p>${v.name}</p>
				<p class=${v.isSpecial ? "fc-red" : "fc-green"}>${v.price}</p>
				${v.isSpecial ? '<span class="abs">企业认证</span>' : ""}
				<a class="abs" href="#">申请数据</a>
			</li>
		`;
		});
		// 3.将HTML结构放入指定位置
		$("#apiCardsList").innerHTML = cardsHtml;
	}
	// 6.调用测试
	render(1, 5, listDataArr);
	// 7.优化代码
	});
	*/


	//功能七:设置蒙层
	// 思路:1.获取相关节点
	// $("#mask")
	// $("#apiCatesList")
	// console.log($("#apiCatesList"));
	
	//2.给公共的祖先元素apiCardsList绑定点击事件,事件委派
	$("#apiCardsList").addEventListener("click",function(e){
		//3.根据事件源的localName/nodeName属性进行区分,a标签
		if(e.target.localName === "a"){
			//4.弹出蒙层
			$("#mask").style.display="block";
			//滚动条隐藏
			document.body.style.overflow="hidden";
			
		}
		// console.log("222");	
		//阻止跳转事件
		e.preventDefault();
	});
	//5.点击蒙层关闭蒙层
	$("#mask").addEventListener("click",function(e){
		$("#mask").style.display="none";
		//滚动条显示
		document.body.style.overflow="auto";

		//滚动条是body或根标签的一部分
		// console.log(void 0 === undefined);~
		
	});
	//6.阻止登录框的事件传播
	$("#loginModal").addEventListener("click",function(e){
		e.stopPropagation();
	});
	//功能二:点击模态框中的Tap按钮,对应按钮激活,显示对应的from表单
	$("#loginModal form")[0].style.display="block";     //默认显示第0个form表单
	//1.获取相关节点
	// $("#loginModalTab a")
	// $("#loginModalTab form")
	// $("#numberModal")
	// $("#Qrcode")
	//2.给Top绑定点击事件
	$("#loginModalTab a").forEach(function(v,i){
		v.addEventListener("click",function(){
			//3.先排他,移除所有a标签的激活样式
			$("#loginModalTab a").forEach(function(item,index){
				item.classList.remove("active");
				//a标签和from标签是一一对应的,数量也是一致的
				// console.log($("#loginModal form")[index]);
				$("#loginModal form")[index].style.display="none";
				
			});
			//4.再给当前点击的a标签增加激活样式 
			this.classList.add("active");
			//5.排他,移除所有显示的form表单
			// $("#loginModal form").forEach(function(each){
			// 	each.style.display="none";
			// });
			//6.显示对应的form表单
			$("#loginModal form")[i].style.display="block";
			
		})
	});


	
	
	
	
	


























	
	//功能三:回到顶部
	// 思路:1.获取相关节点
	$("#goback");
	//滚动条
	// Window.addEventListener("scroll",function(){
	// 	console.log(Window.scrollY);

	// })
	//2.绑定点击事件
	$("#goback").addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});
});
